<template>
  <view class="fixed-bar-box">
    <view class="fixed-bar">
      <wd-tabbar shape="round" :bordered="false">
        <slot></slot>
      </wd-tabbar>
    </view>
    <view class="tab-placeholder"></view>
  </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.fixed-bar-box {
  width: 100%;
}
.fixed-bar {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: calc(constant(safe-area-inset-bottom) + 10px) !important;
  bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
}
.tab-placeholder {
  height: 60px;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
</style>
